<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			width: 400px;
			height: 400px;
			background:green;
		}
	</style>
	<script>
		document.addEventListener('DOMContentLoaded',function(){
			var oBox=document.getElementById('box');


			var x=0;
			var y=0;
			oBox.addEventListener('touchstart',function(ev){
				var disX=(ev.targetTouches[0].pageX+ev.targetTouches[1].pageX)/2-x;
				var disY=(ev.targetTouches[0].pageY+ev.targetTouches[0].pageY)/2-y;

				function fnMove(ev){
					x=(ev.targetTouches[0].pageX+ev.targetTouches[1].pageX)/2-disX;
					y=(ev.targetTouches[0].pageY+ev.targetTouches[0].pageY)/2-disY;

					oBox.style.transform='translate3d('+x+'px,'+y+'px,0px)';
				}

				function fnEnd(){
					document.removeEventListener('touchmove',fnMove,false);
					document.removeEventListener('touchend',fnEnd,false);
				}

				document.addEventListener('touchmove',fnMove,false);
				document.addEventListener('touchend',fnEnd,false);
				ev.preventDefault();
			},false);
		},false);	
	</script>
</head>
<body>
	<div id="box"></div>
</body>
</html>